// 
// Offers page 
// -------------------------------------------------- 

.offers-container {
  .make-row();
  background-color: @container-page-bg;
  padding: 50px 20px 20px;
}
.offers-container_header {
  .make-row(@grid-gutter-width);
  margin-bottom: 30px;
  h3 {
    .make-md-column(4, @grid-gutter-width);
    margin-top: 0;
  }
  .offers-container_search {
    .make-md-column(8, @grid-gutter-width);
  }
}
// 
// Navigation for messages 
// --------------------- 
.nav-panel-cnt {
  .clearfix;
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
  li {
    float: left;
    margin-right: 30px;
    padding: 3px 0;
    &.nav-panel-cnt-mes {
      padding: 3px 30px 3px 10px;
      position: relative;
      &.active {
        background-color: @blue-color;
        text-align: center;
        a {
          color: #fff;
          cursor: default;
          &:hover {
            text-decoration: none;
          }
        }
        &:after {
          content:"";
          position: absolute;
          bottom: 0;
          left: 50%;
          margin-left: -3px;
          margin-bottom: -5px;
          border-left: 5px solid transparent;
          border-top: 5px solid @blue-color;
          border-right: 5px solid transparent;
        }
        .el-icon-remove-sign {
          color: #fff;
        }
      }
      .el-icon-remove-sign {
        color: @light-grey-color;
        cursor: pointer;
        position: absolute;
        top: 5px;
        right: 5px;
      }
    }
  }
}
.offers-message-cnt {
  .make-row(@grid-gutter-width);
}
.offers-message-list {
  padding: 0;
  .make-md-column(3, @grid-gutter-width);
  .make-sm-column(5, @grid-gutter-width);
  list-style: none;
  margin: 0;
  li {
    background-color: #fff;
    border: 1px solid @border-color;
    margin: 0 0 2px 0;
    padding: 0;
    vertical-align: middle;
    img {
      border: 3px solid @orange-color;
      height: 65px;
      width: 65px;
      margin-right: 5px;
    }
    &.__my img {
      border: 3px solid @blue-color;
    }

    &.active {
      background-color: @orange-color;
      color: #fff;
      &.__my {
        background-color: @blue-color;
      }
    }
    &:hover {
      background-color: @light-grey-color;
    }
  }
}
.offers-message-list_dsc {
  display: inline-block;
  vertical-align: middle;
}
.offers-message-chat {
	.make-md-column(9, @grid-gutter-width);
  .make-sm-column(7, @grid-gutter-width);
}

 @media (min-width: @screen-xs-min) and (max-width: @screen-sm-max) {
  .offers-message-list_dsc{
    display: none;
  }
  .offers-message-list {
    .make-xs-column(3, @grid-gutter-width);
  }
  .offers-message-chat {
    .make-xs-column(9, @grid-gutter-width);
  }
}
.offers-message-chat_display{
	background-color: #fff;
  border: 1px solid @border-color;
  max-height: 555px;
  overflow-y: auto;
  margin-bottom: 15px;
}
.offers-message_i {
  .clearfix;
  background-color: #fff;
  padding: 10px;
  &.__my {
    background-color: #f3f9fb;
    .offers-message_profile {
      float: left;
    }
    .offers-message_text {
      margin-right: 0;
    }
  }
}
.offers-message_profile {
  color: @link-color;
  font-size: 12px;
  padding: 5px;
  float: right;
  text-align: center;
  a {
    .profile_logo(55px);
    img {
      border: 1px solid @border-color;
    }
  }
}
.offers-message_text {
  margin: 0 70px;
}

.offers-message_separator {
    position: relative;
    text-align: center;
    z-index: 1;
    margin-bottom: -10px;

	&:before {
    border-top: 1px solid @border-color;
    content:"";
    margin: 0 auto;
    position: absolute;
    top: 10px; 
    left: 0; 
    right: 0; 
    bottom: 0;
    z-index: -1;
}

 span { 
 	background: #fff; 
 	padding: 0 10px; 
 }
}

.btn-conclude-deal {
	.button-primary;
}
.btn-send-message {
	.button-primary;
	float: right;
	padding: 6px 35px;
	position: relative;
	.el-icon-comment {
		font-size: 16px;
		position: absolute;
		top: 8px;
		left: 8px;
	}
}

.offers-message_form {
	position: relative;
	margin-bottom: 15px;

	textarea {
		.form-control;
		min-height: 120px;
		resize: vertical;
	}

	.el-icon-smiley,
	.el-icon-paper-clip,
	.el-icon-map-marker {
		color: @light-grey-color;
		cursor: pointer;
		font-size: 16px;
		position: absolute;
		right: 8px;
	}
	.el-icon-smiley{
		top: 8px;
	}
	.el-icon-paper-clip {
		top: 40px;
	}
	.el-icon-map-marker {
		top: 70px;
	}
}